Kali ini menunjukan 
Bagaiman buat product card seperti ini 


package: flutter/material.dart'; 


main() => runApp( OE 


ora 
PM 2 Type here to search il 


Didalamm card ada 
Foto lalu nama produk ada harga nya 

Lalu disini ada 2 buah button ada quanty yg mau dibeli 

Lalu dibawah ada button card 

Nah beda nya kalau misalkan nya lebih dari 5 maka ada notif kalau dia tambhakn 
10% diskon 


package:flutter/material.dart' ; 


main() -» runApp( WM): 


Kalau dia 6 muncul 

Ini yg mau kita buat kali ini 
Sebelum menjelaskan codingan kita tau structur nya card ini 
Pertama ada card 

Lalu ada notif di belakang card nya 

Supaya tutp seperti ini maka gunakan stack 

Untuk card sendiri kita bagi 2 

Ad bagian atas bagian bawah 

Bagian atas ada gambar judul dgn harga 

Bagian bawh ada tombol 2card dan ada bagian quaty ada 3 
Buton text button di bungkus dgn row 

Maka sekarang ke codingan 

Pertam buat dulu 

Prdouct_card.dart 

Buat dua constanta dari color 

Ada first Color ini warna seperti merah 

dan secondColor ini untuk notif yg warna hijau 

maka tingal pakai 

maka kita buat stl produtCard 


0 ` © A product cardidart 
omn 
en 


ST UNSAVED 


olor firstColor = lor (OxffF44336); 


rr secondColor = Col 


lass Prod rd extends Stat 
@overrida 
build(BuildContext context) { 


return Container ( 


); 
} 


Ke main nya 

Import dulu yg product 

Appbar gunakan warna firstColor 

Body nya container lalu margin untuk akasih jarak tepi2 nya 


main() => runApp( 


build( 
return ( 
debugShowCheckedModeBanner : 
home: ( 


appBar: ( 


backgroundColor: 


( 
margin: 
child: ( 
alignment: 
child: 


), 
` 


Maka sepertin ini 
Lalu kita kerjakan productCard Kita 


QO); 
{ 


context) { 


firstColor, 


.a11(20), 


.topCenter, 


OF 


Pertama buat satu buah stack lalu children nya 


Dalamnya pertama buat notif 
Kedua card nya 
Offset ini geser untuk bayangan nya 


decoration: 
color: 
borderRadius: 
boxShadow: [ 
color: 
blurRadius: 
offset: 


context) { 


white, 
.circular(16), 
( 
.black.withOpacity(0.2), 
6, 


(1, 1) 


Launching lib\main.dart on RNE L22 in debug mode... 


Built build\app\outputs\apk\debug\app-debug. apk. 


Maka hasilnya seperti ini 
Ini kelupaan judul tapi belakangan 


Kita kerjakan bagian atas nya didalm container nya 
Buat child isinya column 

Agar terpisah atas dan bawah nya 

Buat mainAxis SpaceBetwen 

Maka buat dulu ini 


width: 150, 
height: 250, 
decoration: 


color: -white, 


borderRadius: .circular(16), 
boxShadow: [ ( 
color: .black.withOpacity(0.2), 
blurRadius: 6, 
offset: (1; 1) 
)] 
IP 
child: ( 
mainAxisAlignment: .spaceBetwee 
children: « > 
( 
( 
IP 


Reloaded 2 of 469 libraries in 788ms. 


Ini karena buat spacebetwen 
Space kosong ditengah2 
Sekarang buat bagian atas nya 
Ada gambar jdul dan hargnya 
Maka masukan kedalam column 
Supaya dia rata kiri 

Maka crossAxis buat Start 

Lalu children 

Ada gambar text dan text lagi 
Gambar nya supaya crop atas nya agar melengkung kita bungkus container 
Widht nya 150 height 100 
Decoration boxDecoration 
borderRadius.only 

lalu pasang gambar nya 

pakai networklmage pakai url 
url kasih nama ImageUrl 


children: 


( 


crossAxisAlignment : 


> 


< 


> 


children: < 


( 


width: 1 
height: 


decoration: 


50, 
100, 


borderRadius: 
topLeft: 
topRight: 

), 

image: 
image: 


: ERA 


Launching lib\main.dart on RNE L22 in debug 


Built build\app\output pp-debug.apk. 
Reloaded 2 of 469 1 ari 


V/InputMethodManager(18828): Reporting focus gain, 


2 E Type here to search 
Kita buat diatas 


Final String imageUrl = 
Karena dia final maka ditulis contructornya 
Kasih default nya “” String kosong 


J 


No Con " penda 


package:flutter/material.dart 


, 


firstColor (OxffF44 


secondColor 


imageURL; 


({ - imageURL 


D5 


build ( 
return 


ldren: 


context) { 


-only( 
.circular(16), 
-circular(16) 


( 
(imageUR) 


mode... 


without startInput 


(OxFF4CAF 


Launching lib\main.dart on RNE L22 in debug mode... 


Built build\app\outputs\apk\debug\app-debug. apk. 


of 469 libraries in 788ms. 
V/InputMethodManager (18828): 


Reloaded 2 


Reporting focus gain, 


saaros 
. 
a 


Lalu langsung kita pasang 


without startInput 


backgroundColor: firstColor, 
», 
body: ( 
margin: .al1(2@), 
child: ( 
alignment: .topCenter, 
child: ( 
imageURL: 


"https://cdn-prod.medicalnewstoday.com/content/images/articles/308/30e8 


Launching lib\main.dart on RNE L22 in debug mode... 

Built build\app\outputs\apk\debu p-debug.apk. 

Reloaded of 469 librar in ° 

V/InputMethodManager(18828): Reporting focus gain, without startInput 


Kembali lagi 
Disni decoration imagenya 

Pasang boxfit cover 

Sekrang pasang text 

Karena supaya tidak terlalu mempet dgn container 
Kasih margin nya 5 

Child nya kasih text 

Lalu berikutnya buat harganya 

Harga nya buat only kiri 5 kanan 5 


e product candiart 6 
topLeft: dius.circular(16), 
topRight: Radius.circular(16)), 
image: Decora 1Image( 
image: Netw nage(imageURL), fit: BoxFit.cover)), 


» 


tainer( 
margin: geInsets.all(5), 
child: Text(name), 

), 
ntainer( 
margin: Edgel ts.only(left: 5, 
child: Text(price), 


Launching lib\main.dart on RNE L22 in debug mode... 

Built build\app\outputs\apk\debug\app-debug.apk. 

Reloaded 2 of 469 libraries in 788ms. 

V/InputMethodManager(18828): Reporting focus gain, without startInput 


BRL ARPOURTS 


Kita buat dulu name dan price nya 
Kasih default nya kosongi 


import 


firstColor = lor(OxffF44336): 
secondColor = Color(@xff4CAF5@) ; 


‘does 
imageURL; 
name; 

ing price; 


rd({this.imageURL = s = , this.price = “"}); 


@override 
build(BuildContext context) { 
return Stack( 


children: «W 


DEBUG CONSOLE 
Launching lib\main.dart on RNE L22 in debug mode... 

Built build\app\outputs\apk\debug\app-debug. apk. 

Reloaded 2 of 469 libraries in 788ms. 

V/InputMethodManager(18828): Reporting focus gain, without startInput 


Baru buat textstyle namanya textStyle 
Didalmnya font family gunakan lato 
Disni sudah dipasang fontnya 

Pakai bold dan colors 


© procuct.candidart è 
impo 

ae import 

© product 

NUTTER cewo 


const firstColor = lor (Oxf¥F 44336); 
onst r secondColor = lor (Oxf f4CAF5@) ; 


"d extends 
imageURL ; 
name; 
tring price; 
inal TextStyle textStyle = 
fontFamily: M 
fontSize: 14, 
fontWeight: FontWeight.bold, 
color: Co .grey[ 800] 


); 


({this.imageURL = this s this.price = })5 


Launching lib\main.dart on RNE L22 in debug mode... 

Built build\app\outputs\apk\debug\app-debug.apk. 

Reloaded 2 of 469 libraries in 788ms. 

V/InputMethodManager(18828): Reporting focus gain, without startInput 


omm 


Penoas 


Kalau sudah kita kebawah pasang style nya 
Tapi untuk price ukuran nya kecil sisa nya sama 
Kita bisa buat copywith 


Dalam copywith bisa kita ganti ganti 
Contoh size nya jadi 12 dan color nya 


` 8 product.canddart 6 
Image: veco Lonimage( 


angka image: Netw age(imageURL), fit: £E it.cover)), 
RUTTER omo yg 
r( 
margin: Edg ts.all(5), 
child: Text( 
name, 
style: textStyle, 
), 
)s 
ainer( 
margin: Edge sets.only(left: 5, right: 5), 
child: xt ( 
price, 
style: 
textStyle.copyWith(fontSize: 12, color: firstColor), 


» 


Launching lib\main.dart on RNE L22 in debug mode... 

Built build\app\outputs\apk\debug\app-debug. apk. 

Reloaded 2 of 469 libraries in 788ms. 

V/InputMethodManager(18828): Reporting focus gain, without startInput 


Pn to search 


Sekarang ke main dart 
Kasih name dan price nya 


oundColor: firstColor, 


ALUTTUR oeme 


-a11(20), 
( 
nment: .topCenter, 
d: 
ageURL: 
"htt cdn-prod.medica e day .com/ conte rtic 308/308 
name Buah-buahan Mix = 


5.000 


Launching lib\main.dart on RNE L22 in debug mode... 
Built build\app\outputs\ NdebugNapp-debug.apk. 
Reloaded 2 of 469 librari in 788ms. 


V/InputMethodManager(18828): Reporting focus gain, without startInput 


Kita stop kita f5 lagi 


backgroundColor: firstColor, 
); 
body: 
margin: -al11(20), 
child: ( 
alignment: . topCenter, 
child: 
imageURL: 


Buah-buahan Mix 1 kg 


ttps://cdn-prod.medicalnewstoday.com/con 
name: "Buah-buahan Mix 1 kg", 


Naa Aa TOT 6 
price: "Rp25.000", bawah 


IP 
)s 
), 


Launching lib\main.dart on RNE L22 in debug mode... 


Built t ld\app\outputs \apk\debug\app-debug. apk. 


Maka sudah seperti ini 


Ini kalau buah2 satu line maxsimal bisa tambahkan maxsimum line nya dialam text 
dibuah2 an ini 
Lanjut dibawah bagian 


( 
margin: -only(left: 5, right: 5), 
child: 
price, 
style: 
textStyle.copyWith(fontSize: 12, color: firstColor) 


Launching lib\main.dart on RNE L22 in debug mode... 


Built build\app\outputs\apk\debug\app-debug.apk. 


Disini buat column 

Childre nya ada 2 

Tsi tombol + dan tombol to cart 

Tombol + buat reisedButton bungkus dgn sized box 
Widht nya 140 

Supaya margin kiri kanan 5 

Karena lebar nya 150 ini 140 maka sisa 10 

Column kalau gk pasang maiAxis default nya ditengah 
Karena diatengah maka sisa nya dibawgi 2 
onPrased kasih nama onAddCard 

color gunakan firtColor 

Icon nya cart 

Shape pasang rounded borderradius.only 

Itu kasih border radius bagian bawah saja 
Botomleft 16 botom right juga sama 


No Configurations "GP ~ product candidart © 


children: «W 


dBox( 
width: 
child: RaisedButton( 
onPressed: onAddCartTap, 
color: firstColor, 
child: I (Icons.add shopping cart), 
shape: idedRe gle jer( 
borderRadius: BorderRadius.only( 
bottomLeft: Radius.circular(16), 
bottomRight: Radius.circular(16))), 


}, 


Launching lib\main.dart on RNE L22 in debug mode... 
Built build\app\outputs\apk\debug\app-debug.apk. 


onAddCart kita tambhkan disni 
final function 


VARIABLES 


extends 
z imageURL; 
name; 
price; 
| onAddCartTap; 


final xtStyle textStyle = 
fontFamily: 
fontSize: 14, 
fontWeight: FontWeight.bold, 
color: -grey[800]); 


3 


ard({this.imageURL = , this.name = , this.price = , this.onAddCartTap}); 


@override 
build(8 ic xt context) { 


Launching lib\main.dart on RNE L22 in debug mode... 
Built build\app\outputs\apk\debug\app-debug. apk. 


Type here to search 


kalau masuk parameter funtion tipenya function mka buat this. 
Ke main dart kita tambhkan juga disni kosong buat 


firstColor, 


.a11(20), 


.topCenter, 


imageURL: 


t /cdn-pr || Inewstoday.com/ tent/images 
Buah-buahan Mix 5 


price: "Rp25.000", 
onAddCartTap: () {}, 


Launching lib\main.dart on RNE L22 in debug mode... 
Built build\app\outputs\apk\debug\app-debug.apk. 
Reloaded 2 of 469 libraries in 1,018ms. 

Reloaded 1 of 469 libraries 96 


Lalu kita kebawah lagi 
Size iconya pasang 18 lalu colors nya 


product cardidart 


( 
widt 140, 
child: ( 
onPressed: onAddCartTap, 
color: firstColor, 
child: ( 
.add shopping cart, 
size: 18, 
color: .white, 
), 
shape: ( 
borderRadius: -only( 
bottomLeft: .circular(16), 


bottomRight: -circular(16))), 


Launching lib\main.dart on RNE L22 in debug mode... 
Built build\app\outputs\apk\debug\app-debug. apk. 
Reloaded 2 of 469 libraries in 1,018ms 

Reloaded 1 of 469 libraries in 6 


season 
. 
a 


Dilihat maka bentuk nya seperti ini 


product cardidart 


( 
width: 146, 
child: ( 
onPressed: onAddCartTap, 


color: firstColor, 
child: ( 
.add shopping cart, Buah-buahan Mix 1kg 
size: 18, 
color: .white, 
), 
shape: ( 
borderRadius: .only ( 
bottomLeft: -circular(16) 
bottomRight: .circular(16 


Launching lib\main.dart on RNE L22 in debug mode... 
Built build\app\outputs\a debugNapp-debug.apk. 
Reloaded 2 of 469 libraries in 1,01 

Reloaded 1 of 469 librar in 696ms. 


Reloaded 2 of 469 libraries in 675ms. 


af Type karo ke 


Sekarangbuat tombol + - 

Gunakan container untuk buat border nya 
Wifht nya 140 

Heigh 30 

Border nya 

Lalu child row 


price, 
style: 
textStyle.copyWith(fontSize: 12, colo 


Buah-buahan Mix 1 kg 


children: 


width: 
height: 30, 


decoration: ( 
border: -all(color: firstColor) 
», 
child: Ol, 
D” 


Launching lib\main.dart on RNE L22 in debug mode... 
Built build\app\outputs\apk\debug\app-debug.apk. 
Reloaded of 469 librari in 1,01 
Reloaded of 469 libraries in 696ms. 
Reloaded 2 of 469 librari in 675ms. 
Reloaded 2 of 469 librari in 623ms. 

arraro 


WANG Reloaded 0f 469 libraries in 668ms. 
a 


Sekarang buat didalm row ada buton dan ada text nya di tengah 
Disni mainAxis nya spaceBetween 


Lalu container 
Widht nya 30 
Height 30 


product carddart © 


WARIABLIS ( 


children: 


width: 

height: 

decoration: ( 
border: -all(color: firstColor) 

)s 

child: ( 
mainAxisAlignment: . spaceBetween, 
children: 


width: 
height: 
color: firstColor, 
chil 
Wi 
1 


, PK CONSOLE The [child] contained by 
Built build\app\outputs\apk\debug\app-debug. apk. the container 
Reloaded 2 of 469 libraries in 1,018ms. 
Reloaded of 469 libraries in 696ms 
Reloaded 2 of 469 libraries 675ms 
Reloaded 2 469 libraries i 
aan eloaded f 469 libraries in 668ms 


startInput 


H- Type here to sea 


Lalu childnya icon.add sizenya 18 
Colors white 


configs y product candidart © 


child: ( 
mainAxisAlignment: .SpaceBetween, 
children: « >[ 


width: 
heigh 

color: 
child: 


», 
), 


Built build\app\outputs\apk\debug\app-debug. apk. 
Reloaded of 469 libraries in 1,018ms 
Reloade of 469 libraries i 


Reloaded of 469 libraries i 


1 

Reloaded 2 of 469 libraries i 
2 
2 


Reloaded of 469 libraries i 


V/InputMethodManager (20228) : gain, without startInput 


Container ini supaya bisa diklik maka bungkus gestureDetector 
Ontap pasang onlncTap 


No Configurations * product cardidart © 


VARIABLES 


child: ( 
mainAxisAlignment: . spaceBetween, 
children: < >[ 
( 
onTap: onIncTap, 
child: 
width: 
height: 30, 
color: firstColor, 
child: ( 
.add, 
size: 18, 
color: .white, 
», 
», 


1 


Built build\app\outputs\apk\debug\app-debug.apk. 
Reloaded 2 of 469 libraries in 1,018ms. 
Reloade 469 libra in 696ms 


Reloaded 2 469 libraries in 675m 


Reloaded of 469 libraries in 623ms. 
Reloaded 2 of 469 libraries in 668ms. 
IN 
WAN breng V/InputMethodManager (20 : Reporting focus gain, without startInput 


Ini kita copy 


agar kita buat sama 


No Configu o product cardidart 6 
mainAxisAlignment: .spaceBetween, 
children: « >[ 

( 
onTap: onIncTap, 
child: 

width: 
height: 
color: firstColor, 
child: 


size: 


color: 


i p 
Built build\app\outputs\apk\debug\app-debug.apk. 
Reloaded 2 469 libraries in 1,018ms. 
Reloaded of 469 libraries in 696ms 
Reloaded 2 of 9 libraries in 675ms. 
Reloaded 2 of 469 libraries in 623ms. 
Reloaded 2 libraries in 668ms. 

sei nrowrs 


ting focus gain, without startInput 


[A U 


Sebelum buat buton lagi buat text untuk quanty nya 
Lalu buat lagi tombol berikutnya 

Ontap ganti 

Icons.remove 


No Configurations product candidart © 


au STACK 
3 X2 


Built 
Reloaded 
Re 


2 of 469 

of 469 
Reloaded of 469 1 
Reloaded of 469 
Reloaded of 469 


BRL ARPOURTS 


Saat kita keatas 

Buat final function onIncTap 
Dan onDecTap 
Dan buat final g 


V/InputMethodManager (2 


uanty 


No Configurations p product cardidart 6 


kage: 


firstColor 
secondColor 


libraries i 


librar 


libraries 


) 
(guantity, style: textStyle), 
( 
onTap: onDecTap, 
child: 
width: 
height: 
color: firstColor, 
child: ( 
.removel, 
size: 18, 
color: 
) 
) 


.white, 


», 


build\app\outputs\apk 


1,018ms. 


in 


ibraries in 


libraries in 


in 


28): Reporting focus gain, without startInput 


flutter/material.dart' : 


(0xffF44 
(@xf fACAF 


quantity; 


fontFamily: 


Au STACK á 


2 X2 
Built build 
of 469 
of 469 
of 469 
of 469 
of 469 


Reloaded 
Reload 


Reloaded 


ad 


Reloaded 


Reloaded 


BREAKPOINTS 


Lalu di contructor beratrti 


app \outputs 

“aries 
libraries 
libraries 


V/InputMethodManager (26228 


onAddCartTap, 
onIncTap, 
onDecTap; 


textStyle = 
Lato", 


fontSize: 14, 


NapkNdebugNapp-debug. apk. 
1,018ms. 


696 


in 
in 
in 675ms. 
in 
in 668ms. 


Reporting focus gain, without startInput 


No Configurations * product candidart © 


VARIABLES, 


price; 
quantity; 
onAddCartTap, 
onincTap; 
onDecTap; 


textStyle 
fontFamily: "Lato", 
fontSize: 14, 
fontWeight: 
color: -grey[s 


( 
. imageURL : .name = ' price = 
.guantity, .onIncTap, .onDecTap, .onAddCartTap}); 


: BUNG CONSOLE 
Built build\app\outputs\apk\debug\app-debug.apk. 
Reloaded 2 of 469 libraries 

eloaded 69 librar in 6 
Reloaded 2 469 libraries in 67 
Reloaded of 469 librar in 
Reloaded 2 of 469 lib in 668ms 


Bs aromis 


V/InputMethodManager : Reporting focus gain, without startInput 


a] P Type here to search 
Kita bawah 


Disni quanty nya pasang toString 


ig P product t. 
height: 30, 
color: firstColor, 
child: ( 
. add, 
size: 18, 
color: 


), 
), 
(quantity. toString()|, style: textStyle), 
( 

onTap: onDecTap, 

child: ( 
width: 30, 
height: 30, 
color: firstColor, 
child: ( 


. remove 


Built build\app\outputs\apk\debug\app-debug. apk. 


Reloaded 2 9 li ries in 1,018ms 
librari in 

Reloaded F libraries in 675) 

Reloaded 2 469 libraries in 623 

Reloaded 2 libraries in 668ms 
eRLAPOWTS 
Bae V/InputMethodManager( 20228): Reporting focus gain, without startInput 
a 


Untukl quanty kita pasang defaulnyta 0 


product cardidart 6 
fontWeight: 
color: 


( 
.imageURL = 
.name 
price = 
.guantity 
.onIncTap, 
-onDecTap, 
-onAddCartTap}) ; 


build( context) { 
n 


children: 


mA STN 


Built build\app\outputs\ap ebug\app-debug.apk. 


Reloaded of 469 libraries in 1,018ms. 
Reloaded of 469 librar in 
Reloaded of 469 libraries in 
Reloaded of 469 libraries in 
Tea Reloaded of 469 libraries in 


WANG V/InputMethodManager (2 ): Reporting focus gain, without startInput 
a 


Terus ke main dart jgn lupa pasang juga 
Ouanty 0 dulu 


No Configurations " GP r 


backgroundColor: firstColor, 
E 
body: 
margin: .a11(20), 
chil 
alignmen .topCenter, 
child: 
imageURL: 
i /cdn-prod licalnewstoday.com tent/images/article 
name: n-buahan Mix 1 kg", 
price: "Rp25.000", 
quantity: ð, 
onAddCartTa Odi 
onIncTap: () {}, 
onDecTap: () {}, 


), 


semua CONSOLE 
Built build\app\output pk \\debug\app-debug. apk. 
Reloaded 2 of 469 "ies 1,018ms 
Reloaded of 469 libra in 696 
reloaded of 469 libraries in 675ms. 
Reloaded of 469 libraries in 623ms. 

— Reloaded 2 of 469 libraries in 668ms 


Bae V/InputMethodManager (20 ): Reporting focus gain, without startInput 
a 


lalu kita restart kita lihat 


backgroundColor: firstColor, 


), 
body: ( 


Phen A 20 ‘grr 2 

margin: al1(20), 4 GEA 

child: ( Na + 
alignment: .topCenter, Scare i i 


child: ( Buah-buahan Mix 1 kg 
imageURL: 
"h s://cdn-prod.medicalnewstoday.com/con 
name: jah-buahan Mix 1 kg", 
price: "Rp25.000", 
quantity: @, 
onAddCartTap: () {}, 
onIncTap: () {}, 
onDecTap: () A), 
J; 
)s 


Reload already in progress, ignoring request 


Restarted application in 1,623ms. 


af Type here to search 


Maka sekarang sudah jadi 

Sekarang tambah notifikasi nya 

Ke product card 

Disni notifikasi buat dgn animatedContainer 

Widht nya kasih 130 

Lalu heigh tergantung notifikasi tidak nul != null maka tinggi nya 270 kalau gk : 250 
Notifkasi sendiri kita buat 

Buat final notif 


far DULU = 


secondColor = 


imageURL ; 

name; 

price; 

guantity; 

notification; 
onAddCartTap; 
onIncTap; 
onDecTap; 


textStyle = 
fontFamily: "Lato", 
fontSize: 14, 
fontWeight: .bold, 
color: .grey(860)): 


Reload already in progress, ignoring reguest 


Restarted application in 1,623ms. 


LOKER O LAB vm 


Lalu disni this.notif default O maka tidak ada 


fontFamily: " 05; 
fontSize: 14, 

fontWeight: .bold, 
color: -grey[800]); 


( 

.imageURL = “" 
name = "", 
-price = 
-quantity = @, 
.notification, 
.onIncTap, 
.onDecTap, 
.onAddCartTap)), 


build( context) ( 


Reload already in progress, ignoring reguest 
Restarted application in 1,623ms. 


af Type hare to search 
Kembali disni 
Pasang duration lama nya pasang 300 mili 

Pasang juga border decoration nya 

Bagian bawah saja 

Disni color nya pasang warna hijau 

Lalu diluar pasang child 

Child nya itu text untuk notif 

Karena ada dibawah pasang align 

Align.bottomCenter 

Lalu child nya baru text 

Text nya itu kalau notif nya gk sama nul maka akan tampil notik kalau nul pasang 
string kosong 

Stylenya 


product candidart © 


build ( context) ( 
return ( 


children: « 


duration: (milliseconds: 300), 
width: 130, 

height: (notification != 

decoration: 


borderRadius: -only( 
bottomLeft: .circular(8) 
bottomRight: .circular(8) 


», 

color: secondColor 
)s 
child: ( 

alignment: .bottomCenter, 
)» 


Reload already in progress, ignoring request 


tarted application in 1,623ms. 


Style kita ganti copytWith colornya 
Lalu kita ke main kasih notif nya 


No Configu “6. mandat 6 . 


backgroundColor: firstColor, 
); 
body: 
margin: .al1(20), 
child: ( 
alignment: .topCenter, 
child: 
imageURL: 
“https://cdn-prod.medicalnewstoday.com/content/ ima 
name: ahan Mix 1 kg", 
price: "Rp25.000", 
quantity: ð, 
notification: "Diskon 10%", 
onAddCartTap: () (), 
onIncTap: () 4), 
onDecTap: () 4), 
), É 
Reload already progress, ignoring request 


Restarted application in 1,623 


Lalu kita restart ini miring 


No Configurations * 


backgroundColor: firstColor, 

», 

body: 
margin: .a11(20), E am EV 
marg (20) 7 FES 


r 
.topCenter, Sii : 


Buah-buahan Mix 1 kg 


.com/ con 


name: "Buah-buahan Mix 


price: "Rp bee", 
quantity: ð, 
notification: “Diskon 10% 
onAddCartTap: () {}, 
onIncTap: () {}, 
onDecTap: () {}, 


), 


Reload already in progress, ignoring request 


Restarted application in 1,469ms. 


Kasih margin disni 
Kiri kanan saja 10 
Kasih juga shadow 


N - œ 


children: < 


margin: -only(left: 10, right: 10), 
duration: (milliseconds: 300), 
width: 3 
height: (notification != 
decoration: 
boxShadow: [ 
blurRadius: 3, 
offset: (ale a By. 
color: .-black.withOpacity(@ 
)1, 
borderRadius: -only( 
bottomLeft: -circular(8), 
bottomRight: -circular(8)), 
color: secondColor), 
child: ( 
Reload already in progress, ignoring request 
Restarted application in 1,469ms. 


GREARPOURTS 
s 


Lalu kasih pading all 5 


product card dart 


children: < 


padding: .al1(5), 

margin: -only(left: 10, right: 10), 
duration: (milliseconds: 300), 
width: 130, 

height: (notification != 


Buah-buahan Mix 1 kg 
decoration: 


boxShadow: [ 
( 
blurRadius: 
offset: (1, 1), 
color: .black.withOpacity(8.3)) 
If 
borderRadius: ly( 
bottomLeft: -circular(8), 
bottomRight .circular(8)), 
Reload already in progress, ignoring reguest 
Restarted application in 1,469ms. 
Reloaded 2 of 469 libr in 856ms 
Reloaded 2 of 469 libraries in 601ms 
4( 20228): partial code cache collection, code=28KB, data=27 
DANANG 1/ 64( 26228): After code cache collection, code=2 data=27KB 


. I/zygote64(20228): Increasing code cache capacity to 128KB 
a 


af Type here tose 


Maka sudah pas sekrang pasang mekanik nya supaya jalan 
Pasang disni providers 


No Coni ms Y P mandat 6 
'package:flutter/material.dart'; 


H 


'product_card.dart'; 


main() => runApp( GJ 


build( context) { 
return ( 
debugShowCheckedModeBanner : 
home: ( 
appBar: ( 
backgroundColor: firstColor, 
); 
body: 
margin: .al1(20), 
1 EBANG 25 
Reload already in progress, ignoring reguest 
Restarted application in 1,469ms. 
of 469 librar in 856ms. 
of 469 libraries in 601ms. 
I/zygote64( ): Do partial code cache collection, code KB, data=27KB 
ygote64(2e2 : After code cache collection, code=28KB, data=27KB 


gote64(20228): Increasing code cache capacity to 128KB 


[A > enere rosan 


Buat disni class 

Class ProdukState 

Catat quanty saja 0 

Lalu getter dan setter nya 
Dan jgn notifyListener 


_quantity = 


quantity => _quantity; 
quantity( newValue) { 
_quantity = newValue; 
notifyListeners(); 


ALL STACK 


i BUG CONSOLE 
Reload already in progre ignoring request 
Restarted application in 1,469ms. 

Reloaded of 469 libra 


2 
Reloaded 2 of 469 libraries in 6@1ms. 


ygote64(20228): Do partial code che collection, code-28KB, ta=27 
ygote64( 20228): After code cache collection, code=28KB, data=27KB 
tr ARPOWNS 


3228): Increasing code cache capacity to 128KB 


Keatas kita bungkus dgn widget 


figurations * GP mandat 


build( context) { 
( 
debugShowCheckedModeBanne 
home: ( 
appBar: ( 
backgroundColor: firstColor, 
), 
body: 
margin: 
child: 
alignmen 
child: 
imageU 


“h = medicalnewstoday.com ontent/images/article 
name: x > «1 kg", 


price: 
1 oem 
Reload already in progre ignoring reguest 
Restarted application in 1,469ms. 
oaded 2 of 469 li r in 856ms. 
oaded 2 of 469 libraries in 6@1ms. 
ygote64(20228): Do partial code cache collection, code=28KB, data=27KB 
ygote64( 20228): After code cache collection, code=2 


SELAMA 


BAN Exe I/zygote64(20228): Increasing code cache capacity to 


Ci: Type here to search 
Dgn change 


Tipenya produkState 
Buildernya context dia akan kemablaikan produkState 


build( context) { 
return ( 
debugShowCheckedModeBanner: 
home: ( 
appBar: ( 
backgroundColor: firstColor, 
)s 
body: 
builder: (context) => 
child: ( 
margin: -al1(20), 
child: ( 
alignment: .topCenter, 
child: 
imageURL: 


"https://cdn-prod.medicalnewstoday.com/content/im 


Reload already in progress, ignoring reguest 
Restarted application in 1,469ms. 
2 of 469 librar in 85 
Reload 2 of 469 libraries in 601ms. 
I/zygote64(20228): Do partial code cache collection, code=28KB, data=27KB 
— I/zygote64(20228): After code cache collection, code-28KB, data=27KB 


I/zygote64(20228): Increasing code cache capacity to 128KB 


builder: (context) => 
child: ( 


margin: .a11(20), 
child: ( 
alignment: .topCenter, 
child: « >( 
builder: (context, productState, 


imageURL: 

"htt 
name: "Buah buahan M 
price: "Rp25.000", 
quantity: 
notification: "D 
onAddCartTap: () 
onIncTap: () {}, 
onDecTap: () {}, 


on 
Reload already in progress, ignoring request 
Restarted application in 1,469ms. 
2 of 469 librar in 856ms. 
Reloaded 2 of 469 libraries in 601ms. 
ygote64(20228): Do partial code cache collection, coc KB, data=27KB 
— ygote64(20228): After code cache collection, code=28KB, data=27KB 


Bao I/zygote64(20228): Increasing code cache capacity to 128KB 
a > 


Sekarang tingal ubah disni 

Quanty maka ambil dari Productstate.quanty 

Untuk addCart kosongi itu tergantung kalian pakai apa 
Sekarang onIncTap kita tambahkan.quanty ++ 

Kalau decrement kita kurangi 


Untuk notif kalau productState.quanty lebih besar lima maka tampilkan diskon 10 
persen kalau gk nul 


ag 


fis P man dart 


alignment: .topCenter, 
child: « >( 
builder: (context, productState, _) => 
imageURL: 
"https://cdn-prod.medicalnewstoday. 
name: "Buah-buahan Mix 1 kg", 
price: "Rp25.000", 
guantity: productState.guantity, 
notification: (productState.quantity > 5) ? "Diskon 10% 
onAddCartTap: () {}, 
onIncTap: () 4 
productState.quantity++; 
b 
onDecTap: () 4 
productState.quantity--; 
b 
), 


Restarted application in 1,469ms. 

Reloaded 2 of 469 libraries in 856ms. 

Reloaded 2 469 libraries in 601ms. 

1/zygote64(28228): Do partial code cache collection, code=28KB, data=27KB 
I/zygote64( 3): After code cache collection, code=28KB, data- B 


I/zygote64(20228): Increasing code cache capacity to 128KB 
4 


Reloaded 11 o 79 libraries in 831ms. 


a | D Iyen ac o 
Sekarang kita lihat 


alignment: .topCenter, 
child: « >( 
builder: (context, productState, 
imageURL : 
"https://cdn-p d.medicalnewstoda 


name Buah-buahan Mix 1 k 
price: "Rp25.060", Buah-buahan Mix 1 kg 
quantity: productState.quantity, 
notification: (productState.quantity > 5) 
onAddCartTap: () {}, 
onIncTap: () 4 
productState.quantity++; 
if 
onDecTap: () 4 
productState.quantity--; 
b 
), 


After code cache collection, code=28KB, data=27KB 
/zygote64( Increasing code cache capacity to 128KB 
eloaded 11 of 479 libraries in 831ms. 
hwaps (28228): JNI Onload 
/zygote64(20228): Do partial code cache collection, code=57KB, data=51KB 
/zygote64(20228): After code cache collection, code=57KB, data=51KB 


/zygote64(20228): Increasing code cache capacity to 256KB 


Sekarang keluar 


Kalau ingin tambhakn progres bar juga bisa 
Yaitu jumlah stok nya 


No Configuration 


alignment: .topCenter, 
child: « >( 
builder: (context, productState, 
imageURL : 
"https: //cdn-prod.medicalnewstoday.com 
name: "Buah-buahan Mix 1 kg 
price: "Rp25.000", Buah Mix 1kg 
quantity: productState.quantity, 
notification: (productState.quantity > 5) @ an 
onAddCartTap: () {}, 
onIncTap: () 4 
productState.quantity++; 
}, 
onDecTa ‘Oy st 
productState.quantity--; 
b 
); 


Reloaded 11 of 479 libraries in 831ms. 
/hwaps 8): JNI OnLoad 
/zygo ( 8): Do partial code cache collection, code-57KB, dat 


ygote64( 3): After code cache collection, code-57K data=51KB 


/zygote64( 28): 4 2 cache cap. 


alignment: .topCenter, 
child: « >( 
builder: (context, productState, 
imageURL : 


"https: // -prod.medicalnewstoc 


h buahar Mix 1 
25.000", 
productState. quantity, 
notification: (productState.quantity > 5 
onAddCartTap: () {}, 
onIncTap: () { 
productState.quantity++; 
if 
onDecTap: () 4 
productState.quantity--; 


b 
), 


mu STACK 


Reloaded 11 of 479 libraries in 831ms. 

/hwaps (20228): JNI OnLoad 
I/zygot ( ): Do partial code cache collection, code=57KB, data-51KB 
I/zygote64( : After code cache collection, code=57KB, data=51KB 
I/zygote64(20228): Increasing code cache capacity to 256KB 
Application finished. 


RL ARPOUTS 


a Type here to sea 
10 dari 10 
Kalau beli dia berkurang 


£ 


pCenter, 
child: < >( Product Card Example 
builder: (context, productState, 
imageURL : 


name: 4 


price: 4 Buah Mix 1kg 
guantity: productState.guantity, Rp25.000 


notification: (productState.guantity » 5) kad, 
onAddCartTap: () 4), 
onIncTap: () 4 | 
productState.quantity++; 
» 
onDecTap: () ( 
productState.guantity- 


b 
), 
Reloaded 11 of 479 librari in 831ms. 
/hwaps (20228): JNI OnLoad 
/zygote64(20228): Do partial code cache collection, 
After code cache collection, code-57KB, data-51KB 
Increasing code cache capacity to 25 


d. 


BRL ARPOURTS 


